<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">换班申请</text>
      <view class="nav-right">
        <uni-icons type="ellipsis" size="24" color="#fff" style="margin-right: 20rpx;"/>
        <uni-icons type="circle" size="24" color="#fff"/>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 用户信息区域 -->
      <view class="user-info">
        <view class="user-header">
          <view class="avatar">
            <text class="avatar-text">证</text>
          </view>
          <view class="user-details">
            <text class="username">王1辅导员</text>
            <text class="user-id">10086</text>
          </view>
          <uni-icons type="phone" size="28" color="#007AFF"/>
        </view>
        <view class="user-unit">
          <text class="unit-label">所在单位：</text>
          <text class="unit-value">A学院</text>
        </view>
      </view>
      
      <!-- 换班申请信息区域 -->
      <view class="request-info">
        <text class="section-title">换班申请如下：</text>
        
        <view class="info-item">
          <text class="info-label">值班开始时间：</text>
          <text class="info-value">2025/2/24 18:00:00</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">值班结束时间：</text>
          <text class="info-value">2025/2/25 8:00:00</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">值班校区：</text>
          <text class="info-value">新顺学生活动中心3层辅导员发展中心</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">值班住宿地址：</text>
          <text class="info-value">值班住宿地址</text>
        </view>
      </view>
      
      <!-- 换班理由区域 -->
      <view class="reason-section">
        <text class="reason-content">
          "你好，最近我家里有点急事，可能需要在调整一下工作安排，我知道这可能会给你带来一些不便，但你平时工作认真负责，我想问你能不能帮我代一下这个班？我之后一定会找机会帮你分担一些其他工作，或者请你吃饭作为感谢。"
        </text>
      </view>
      
      <!-- 确认按钮区域 -->
      <view class="confirm-section">
        <button class="confirm-btn" @tap="confirmShift">同意换班</button>
      </view>
    </scroll-view>
    
    <!-- 底部导航按钮 -->
    <view class="bottom-nav">
      <view class="nav-item" @tap="navigateTo('/pages/counselor/duty-schedule')">
        <uni-icons type="list" size="24" color="#999"/>
        <text class="nav-text">值班安排</text>
      </view>
      <view class="nav-item active" @tap="navigateTo('/pages/counselor/shift-request')">
        <uni-icons type="exchange" size="24" color="#007AFF"/>
        <text class="nav-text active">换班申请</text>
      </view>
      <view class="nav-item" @tap="navigateTo('/pages/counselor/more-functions')">
        <uni-icons type="more" size="24" color="#999"/>
        <text class="nav-text">更多功能</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      // 导航到指定页面
      navigateTo(url) {
        // 如果点击的是当前页面，则不跳转
        if (getCurrentPages().slice(-1)[0].route !== url.replace('/pages/', '')) {
          uni.navigateTo({
            url: url
          });
        }
      },
      
      // 同意换班
      confirmShift() {
        uni.showModal({
          title: '确认换班',
          content: '确定要同意这次换班申请吗？',
          success: (res) => {
            if (res.confirm) {
              uni.showToast({
                title: '已同意换班',
                icon: 'success'
              });
              
              // 返回上一页
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }
  
  .nav-bar {
    height: 88rpx;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }
  
  .nav-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .nav-right {
    display: flex;
    align-items: center;
  }
  
  .content {
    flex: 1;
    padding: 30rpx;
  }
  
  .user-info {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }
  
  .user-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
  }
  
  .avatar-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .user-details {
    flex: 1;
  }
  
  .username {
    display: block;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }
  
  .user-id {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-top: 5rpx;
  }
  
  .user-unit {
    font-size: 28rpx;
    color: #333;
  }
  
  .unit-label {
    color: #666;
  }
  
  .unit-value {
    color: #333;
  }
  
  .request-info {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }
  
  .section-title {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .info-item {
    font-size: 26rpx;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .info-item:last-child {
    margin-bottom: 0;
  }
  
  .info-label {
    color: #666;
  }
  
  .info-value {
    color: #333;
  }
  
  .reason-section {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }
  
  .reason-content {
    font-size: 26rpx;
    color: #333;
    line-height: 1.6;
  }
  
  .confirm-section {
    padding: 0 30rpx;
  }
  
  .confirm-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #007AFF;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
  }
  
  .tab-bar-placeholder {
    height: 120rpx;
  }

  /* 底部导航样式 */
  .bottom-nav {
    height: 120rpx;
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #eee;
  }
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .nav-item.active .nav-text {
    color: #007AFF;
  }
  
  .nav-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
  }
</style>